define(['jquery'],()=>{
    class checkTab{
        constructor(){
            // this.span = document.querySelector('.shopspan')
            this.btns = document.querySelector('.btns>a')
            this.number = document.querySelector('.u-num')
            this.init()
        }
        init(){
            this.ckTab()
        }
        ckTab(){
            $('.tab>ul>li').click(function(){
                $('.tab>ul>li').eq($(this).index()).addClass('show1').siblings().removeClass('show1')
                $('.tab-con>div').eq($(this).index()).addClass('active1').siblings().removeClass('active1')
            })
        }
    }
    
    class render{
        constructor(){
            this.mask = $('.mask')
            this.bigpic = $('.bigpic')
            this.aLi = $('.checkpic>ul>li')
            this.init()
        }
        init(){
            this.request()
            // this.count()
        }
        getName(){
            let str = location.search.slice(1)
            let arr = str.split('&')
            let obj = {}
            arr.forEach(item=>{
                let newArr = item.split('=')
                obj[newArr[0]] = newArr[1]
            })
            var a = obj.id
            return a
        }
        request(){
            let id = this.getName()*1
            if(!id){
                location.href = 'http://localhost:8888/index.html'
                return false
            }else{
                $.get('/data/goods.json')
                .then(res=>{
                    let data = res.slice(0, 500)
                    this.render(id, data)
                })
            }
        }
        render(id, data){
            let res = data.find(item=>{return item.goods_id == id})
            $('.imgpic')[0].innerHTML = res.goods_introduce
            $('.xuan5')[0].innerHTML = `
                <div class="fangda">
                    <img src="${res.img_big_logo}" alt="" class="show">
                    <img src="../img/pic2.webp" alt="">
                    <img src="../img/pic3.webp" alt="">
                    <img src="../img/pic4.webp" alt="">
                    <img src="../img/pic5.webp" alt="">
                    
                    <span class="mask"></span>
                </div>
                <div class="checkpic">
                    <ul>
                        <li class="show2"><img src="${res.img_big_logo}" alt=""></li>
                        <li><img src="../img/pic2.webp" alt=""></li>
                        <li><img src="../img/pic3.webp" alt=""></li>
                        <li><img src="../img/pic4.webp" alt=""></li>
                        <li><img src="../img/pic5.webp" alt=""></li>
                    </ul>
                </div>
                <div class="bigpic">
                    <img src="${res.img_big_logo}" alt="" class="show">
                    <img src="../img/pic2.webp" alt="">
                    <img src="../img/pic3.webp" alt="">
                    <img src="../img/pic4.webp" alt="">
                    <img src="../img/pic5.webp" alt="">
                </div>
                <div class="intro">
                    <div class="name">
                        <div class="left">
                            <b>${res.title}</b>
                            <span>${res.category}</span>
                        </div>
                    </div>
                    <div class="xiangqing">
                        <div class="price">
                            <span class="sp1">价格</span>
                            <span class="sp2">￥</span>
                            <span class="sp3">${res.current_price}</span>
                        </div>
                        <div class="jifen">
                            <div class="left">购物返</div>
                            <div class="right">
                                <span>最高返</span>
                                <span style="color: #c43c3b;margin-right: 4px;margin-left: 2px;">1积分</span>
                            </div>
                        </div>
                        <div class="youfei">
                            <span class="sp1">邮费</span>
                            <span class="sp2">满99元免邮，邮费8元</span>
                        </div>
                        <div class="peisong">
                            <span>配送</span>
                            <div class="address">
                                <div class="left">
                                    <div class="ad">至</div>
                                </div>
                                <div class="center">
                                    <div class="center-tr">
                                        <span>成都市金牛区抚琴街道</span>
                                        <i class="iconfont icon-xialajiantouxiao"></i>
                                    </div>
                                </div>
                                <div class="right">现货</div>
                            </div>
                        </div>
                        <hr>
                        <div class="service">
                            <span class="sp1">服务</span>
                            <a href="">
                                <span class="sp2">
                                ･&nbsp;&nbsp; 严选自营 &nbsp;&nbsp;･ &nbsp;&nbsp;不支持无忧退换 &nbsp;&nbsp;･ &nbsp;&nbsp;不可用券 &nbsp;&nbsp;･&nbsp;&nbsp; 国内部分地区不可配送                            </span>
                            </a>
                        </div>
                    </div>
                    <div class="taste">
                        <span class="sp1">口味</span>
                        <ul>
                            <li><a href=""><img src="../img/sm1.webp" alt=""></a></li>
                            <li><a href=""><img src="../img/sm2.webp" alt=""></a></li>
                            <li><a href=""><img src="../img/sm3.webp" alt=""></a></li>
                            <li><a href=""><img src="../img/sm4.webp" alt=""></a></li>
                        </ul>
                    </div>
                    <div class="number">
                        <div class="number-con">
                            <div class="na">数量</div>
                            <div class="na2">
                                <div class="u-num">
                                    <span class="sp1">-</span>
                                    <input type="text" value="1" class="num">
                                    <span class="sp1 sp8">+</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="btns">
                        <p class="a1">
                            <span data-id=${res.goods_id} class="span1">立即购买</span>
                        </p>
                        <p class="a1 a2">
                            <span data-id=${res.goods_id} class="span2"><i class="iconfont icon-gouwuche"></i>加入购物车</span>
                        </p>
                    </div>
                </div>
            `   
            this.fd()
            this.none()
            this.check()
            this.move()
            this.bindHtml(data)
            // this.count()
        }
        fd(){
            $('.fangda').mouseover(()=>{
                $('.fangda>.mask').addClass('n1')
                $('.bigpic').addClass('n1')
            })
            this.move()
        }
        none(){
            $('.fangda').mouseout(()=>{
                $('.fangda>.mask').removeClass('n1')
                $('.bigpic').removeClass('n1')
            })
        }
        check(){
            $('.checkpic>ul>li').click(function(){
                $('.checkpic>ul>li>img').eq($(this).index()).addClass('show').siblings().removeClass('show')
                $('.fangda>img').eq($(this).index()).addClass('show').siblings().removeClass('show')
                $('.bigpic>img').eq($(this).index()).addClass('show').siblings().removeClass('show')
                $('.checkpic>ul>li').eq($(this).index()).addClass('show2').siblings().removeClass('show2')
            })
        }
        move(){
            $('.fangda').mousemove(function(e){
                e = e || window.event
                let x = e.clientX - $('.fangda').offset().left - $('.fangda>img').position().left - $('.mask').outerWidth()/2
                let y = e.clientY - $('.fangda').offset().top - $('.fangda>img').position().top - $('.mask').outerHeight()/2  + $(window).scrollTop()
                if(x <= 0){
                    x = 0
                }else if(x >= $('.fangda').outerWidth() - $('.mask').outerWidth()){
                    x = $('.fangda').outerWidth() - $('.mask').outerWidth()
                }
                if(y <= 0){
                    y = 0
                }else if(y >=$('.fangda').outerHeight() - $('.mask').outerHeight()){
                    y = $('.fangda').outerHeight() - $('.mask').outerHeight()
                }
                $('.mask').css('left',x).css('top',y)
                let w = x/($('.fangda').outerWidth() - $('.mask').outerWidth())
                let h = y/($('.fangda').outerHeight() - $('.mask').outerHeight())
                $('.bigpic>img').css('left', -w *($('.bigpic>img').outerWidth() - $('.bigpic').outerWidth()))
                $('.bigpic>img').css('top', -h *($('.bigpic>img').outerHeight() - $('.bigpic').outerHeight()))
            })
        }
        bindHtml(data){
            // console.log(data)
            let number = $('.num')[0]
            let sub = $('.u-num>.sp1')[0]
            let add = $('.sp8')[0]
            console.log(sub)
            let num = 0
            console.log(number.value)
            add.onclick = function(){
                num = number.value++
                if(num >= 10){
                    number.value = 10
                    alert('亲，每件商品限购10件！')
                }
            }
            sub.onclick = function(){
                num = number.value--
                if(num<=0){
                    number.value = 0
                }
            }
            let btns = $('.btns')[0]
            btns.onclick = (e) =>{
                let target = e.target || e.srcElement
                if(target.nodeName == 'SPAN'){ 
                    if(target.className == 'span2'){
                        alert('已为您加入购入车！') 
                    }
                    if(target.className == "span1"){
                        location.href = '../html/shopping_cart.html'
                    }
                    let id = target.dataset.id - 0
                    let goods = data.find(item=>{return item.goods_id == id})
                    // console.log(goods)
                    let list = JSON.parse(localStorage.getItem('cart')) || []
                    if(!list.length){
                        list.push(goods)
                        goods.cart_number = number.value
                    }else{
                        let res = list.some(item=>{return item.goods_id == id})
                        if(res){
                            let index = list.findIndex(item=>{return item.goods_id == id})
                            // console.log(list[index].cart_number,number.value, (list[index].cart_number - 0)+ (number.value - 0) )
                            list[index].cart_number = (list[index].cart_number - 0  ) + (number.value - 0)
                        }else{
                            goods.cart_number = number.value
                            list.push(goods)
                            goods.cart_number = number.value
                        }
                    }
                    localStorage.setItem('cart', JSON.stringify(list))
                    // this.count()
                }
            }
        }
        // count(){
        //     let list = JSON.parse(localStorage.getItem('cart')) || []
        //     let num = 0
        //     list.forEach(item=>{
        //         num += item.cart_number - 0
        //     })
        //     this.span.innerHTML = num
        // }
    }
    return {
        checkTab : new checkTab(),
        render : new render()
    }
})